﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>
    <meta charset="utf-8">
    <title>btable</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
	<!-- bootstrap -->
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<script src="js/bootstrap.min.js"></script>



	<script type="text/javascript" src="plugins/layui/layui.js"></script>
    <link rel="stylesheet" href="plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/btable.css" />
</head>

<body style=" background-color: gainsboro;">

	<!-- 弹出框 -->
	<div class="modal fade" id="car_upd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<!-- 美化表单 -->
	<form class="form-horizontal" name="myform" >
	  <div class="modal-dialog" role="document"> 
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">汽车更新</h4>
	      </div>
	      <div class="modal-body">
	        
	        
			  <div class="form-group">
			    <label class="col-sm-2 control-label">汽车型号</label>
			    <div class="col-sm-9">
			      <input type="text" name="cname" id="cname2" class="form-control"  />
			      <input type="hidden" name="cid" id="cid2" class="form-control"  />
			    </div>
			  </div>
			  
			  <div class="form-group">
			    <label class="col-sm-2 control-label">汽车牌号</label>
			    <div class="col-sm-9">
			      <input type="text" name="ccard" id="ccard2" class="form-control"  />
			    </div>
			  </div>
			  
			  <div class="form-group">
			    <label class="col-sm-2 control-label">收费标准</label>
			    <div class="col-sm-9">
					<input type="text" name="cmoney" id="cmoney2" class="form-control" />
			    </div>
			  </div>
			  
			  
			  <div class="form-group">
			    <label class="col-sm-2 control-label">租聘状态</label>
			    <div class="col-sm-9" id="cstateadd">
			    	<select name="cstate">
			    		<option value="已出租">已出租</option>
			    		<option value="空闲">空闲</option>
			    		<option value="维护中">维护中</option>
			    	</select>
			    </div>
			  </div>

	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">退出</button>
	        <button type="button" id="carupd" class="btn btn-primary">更新</button>
	      </div>
	    </div>
	  </div>/tab </form></form>
	</div>	

	<!-- 弹出框 -->
	<div class="modal fade" id="car_Add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<!-- 美化表单 -->
	<form class="form-horizontal" >
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">汽车添加</h4>
	      </div>
	      <div class="modal-body">
	        
	        
			  <div class="form-group">
			    <label class="col-sm-2 control-label">汽车型号</label>
			    <div class="col-sm-9">
			      <input type="text" name="cname" id="cname1" class="form-control"  />
			    </div>
			  </div>
			  
			  <div class="form-group">
			    <label class="col-sm-2 control-label">汽车牌号</label>
			    <div class="col-sm-9">
			      <input type="text" name="ccard" id="ccard1" class="form-control"  />
			    </div>
			  </div>
			  
			  <div class="form-group">
			    <label class="col-sm-2 control-label">收费标准</label>
			    <div class="col-sm-9">
					<input type="text" name="cmoney" id="cmoney1" class="form-control" />
					
			    </div>
			  </div>
			  
			  
			  <div class="form-group">
			    <label class="col-sm-2 control-label">租聘状态</label>
			    <div class="col-sm-9" id="cstateadd">
					<label class="radio-inline">
				  		<input type="radio" name="cstate" id="cstate1" value="已出租"  checked="checked"/>已出租 
					</label>
					<label class="radio-inline">
				  		<input type="radio" name="cstate" id="cstate2" value="空闲"/>空闲
					</label>
					<label class="radio-inline">
				  		<input type="radio" name="cstate" id="cstate3" value="维护中"/>维护中
					</label>
			    </div>
			  </div>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">退出</button>
	        <button type="button" id="carAdd" class="btn btn-primary">添加</button>
	      </div>
	    </div>
	  </div>
	  </form>
	</div>	


    <div style="margin:0px; background-color: white; margin:0 10px;">
        <blockquote class="layui-elem-quote">
            <button type="button" class="layui-btn layui-btn-small" id="but_car_Add">
	            <i class="fa fa-plus" aria-hidden="true"></i> 
	           	 添加
           	</button>
            
            
        </blockquote>
        <div id="content" style="width: 100%;height: 533px;">
	        <!-- 内容 -->
	        <div class="row">
				<div class="col-md-4 col-md-offset-8"></div>
			</div>
			<!-- 显示表格数据 -->
			<div class="row">
				<div class="col-md-12">
					<table class="table table-hover" id="car_table">
						<thead>
							<tr>
								<th>#</th>
								<th>汽车型号</th>
								<th>汽车牌号</th>
								<th>收费标准</th>
								<th>租聘状态</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
						<!-- 车辆信息 -->
						</tbody>
						
						
					</table>
				</div>
			</div>
			<!-- 显示分页信息 -->
			<div class="row">
				<!--分页文字信息  -->
				<div class="col-md-6" id="page_info_area"></div>
				<!-- 分页条信息 -->
				<div class="col-md-6" id="page_nav_area"></div>
			</div>
	    </div>
    </div>
 
    <script type="text/javascript">
    	var totalRecord,currentPage;
	    $(function(){
			//去首页
			to_page(1);
		});
    	
	    function to_page(pn){
			$.ajax({
				url:"carSelAll.do",
				typt:"GET",
				data:"pn="+pn,
				success:function(data){
					/* 在网页F12Network中查看 */
					//console.log(data);
					//1、解析并显示员工数据
					build_emps_table(data);
					//2、解析并显示分页信息
					build_page_info(data);
					//3、解析显示分页条数据
					build_page_nav(data);
				}
			
			});
	    }

		function build_emps_table(data){
			//清空table表格
			$("#car_table tbody").empty();
			var emps = data.list;
			$.each(emps,function(index,item){
				var cidTd= $("<td></td>").append(item.cid);
				var cnameTd= $("<td></td>").append(item.cname);
				var ccardTd= $("<td></td>").append(item.ccard);
				var cmoneyTd= $("<td></td>").append(item.cmoney);
				var cstateTd= $("<td></td>").append(item.cstate);
				/**
				<button class="">
									<span class="" aria-hidden="true"></span>
									编辑
								</button>
				*/
				var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
								.append($("<span></span>").addClass("glyphicon glyphicon-pencil")).append("编辑");
				//为编辑按钮添加一个自定义的属性，来表示当前员工id
				editBtn.attr('id',"edit"+item.cid);
				var delBtn =  $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
								.append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
				//为删除按钮添加一个自定义的属性来表示当前删除的员工id
				delBtn.attr('id',"dle"+item.cid);
				var btnTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);
				//var delBtn = 
				//append方法执行完成以后还是返回原来的元素
				$("<tr></tr>")
					.append(cidTd)
					.append(cnameTd)
					.append(ccardTd)
					.append(cmoneyTd)
					.append(cstateTd)
					.append(btnTd)
					.appendTo("#car_table tbody");
						
				//修改汽车
				$("#edit"+item.cid).click(function(){
					//弹出窗
					var cid=item.cid;
					selcarById(cid);
					reset_form("#car_upd form");
					$("#car_upd").modal({
						backdrop:"static"
					});
				
				$("#carupd").click(function(){
						var cname=document.myform.cname.value;

						var ccard=document.myform.ccard.value;
						var cmoney=document.myform.cmoney.value;
						var cstate=document.myform.cstate.value;
						$.ajax({
							url:"carsUpd.do",
							type:"POST",
							data:{
								cname:cname,
								cid:item.cid,
								ccard:ccard,
								cmoney:cmoney,
								cstate:cstate
							},
							success:function(data){
								if(data==true){
									alert("修改成功");
									//1、模态框隐藏
									$("#car_upd").modal("hide");
									//2、回到本页面
									to_page(currentPage);
								}else{
									alert("修改失败");
									//1、模态框隐藏
									$("#car_upd").modal("hide");
									//2、回到本页面
									to_page(currentPage);
								}
							}
						});
					});  
		
				});
				//回显
				function selcarById(cid){
					$.ajax({
						url:"selcarById.do",
						type:"GET",
						/* 后台得到数据拼接方式  */
						data:"cid="+cid,
						success:function(data){
							$("#cid2").attr("placeholder",data.cid);
							$("#cname2").attr("placeholder",data.cname);
							$("#ccard2").attr("placeholder",data.ccard);
							$("#cmoney2").attr("placeholder",data.cmoney);
							$("[name='checkbox']").removeAttr("checked");//取消全选
							
							if(data.cstate=="空闲"){
								$("#cstate5").attr("checked","checked");
							}else if(data.cstate=="已出租"){
								$("#cstate4").attr("checked","checked");
							}else{
								$("#cstate6").attr("checked","checked");
							}
						}	
					});
					
				}
	
				//删除汽车
				$("#dle"+item.cid).click(function(){
					
					if(confirm("确认删除【"+item.cname+":"+item.ccard+"】吗？")){
						$.ajax({
							url:"delCarById.do",
							type:"GET",
							/* 后台得到数据拼接方式  */
							data:"cid="+item.cid,
							success:function(){
								if(data==true){
									alert("删除成功");
									//回到本页面
									to_page(currentPage);
								}else{
									alert("删除成功");
									//回到本页面
									to_page(currentPage);
								}
							}
								
						});
					};
				});			
			});
		}
		//解析显示分页信息
		function build_page_info(result){
			$("#page_info_area").empty();
			$("#page_info_area").append("当前"+result.pageNum+"页,总"+
					result.pages+"页,总"+
					result.total+"条记录");
			totalRecord = result.total;
			currentPage = result.pageNum;
		}
		//解析显示分页条，点击分页要能去下一页....
		function build_page_nav(result){
			//page_nav_area
			$("#page_nav_area").empty();
			var ul = $("<ul></ul>").addClass("pagination");
			
			//构建元素
			var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
			var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
			if(result.hasPreviousPage == false){
				firstPageLi.addClass("disabled");
				prePageLi.addClass("disabled");
			}else{
				//为元素添加点击翻页的事件
				firstPageLi.click(function(){
					to_page(1);
				});
				prePageLi.click(function(){
					to_page(result.pageNum -1);
				});
			}

			var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
			var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
			if(result.hasNextPage == false){
				nextPageLi.addClass("disabled");
				lastPageLi.addClass("disabled");
			}else{
				nextPageLi.click(function(){
					to_page(result.pageNum +1);
				});
				lastPageLi.click(function(){
					to_page(result.pages);
				});
			}
	
			//添加首页和前一页 的提示
			ul.append(firstPageLi).append(prePageLi);
			//1,2，3遍历给ul中添加页码提示
			$.each(result.navigatepageNums,function(index,item){
				
				var numLi = $("<li></li>").append($("<a></a>").append(item));
				if(result.pageNum == item){
					numLi.addClass("active");
				}
				numLi.click(function(){
					to_page(item);
				});
				ul.append(numLi);
			});
			//添加下一页和末页 的提示
			ul.append(nextPageLi).append(lastPageLi);
			
			//把ul加入到nav
			var navEle = $("<nav></nav>").append(ul);
			navEle.appendTo("#page_nav_area");
		}
		
		//清空表单样式及内容
		function reset_form(ele){
			$(ele)[0].reset();
			//清空表单样式
			$(ele).find("*").removeClass("has-error has-success");
			$(ele).find(".help-block").text("");
		}
			
		//弹出窗
		$("#but_car_Add").click(function(){
			reset_form("#car_Add form");
			$("#car_Add").modal({
				backdrop:"static"
			});
		});
		//提交模态框数据ADD
		$("#carAdd").click(function(){
			var cstate1=$("#cstate1").val();
			var cstate2=$("#cstate2").val();
			/* 添加汽车必须有状态 */
			if(cstate1!=null && cstate2!=null){
				$.ajax({
					url:"carAdd.do",
					type:"POST",
					data:$("#car_Add form").serialize(),
					success:function(){
						//1、模态框隐藏
						$("#car_Add").modal("hide");
						//2、回到本页面
						to_page(currentPage);
					}
				});
			}else{
				alert(cstate1);
				alert("状态错误!");
			}
			
		});	
	</script>
</body>
</html>